<template>
  <div id="app" class="skLifeTableHeader">
    <a-row type="flex" :gutter="[12, 28]">
      <a-col>
        <a-select
          default-value="0"
          v-model="dataForm.classId"
          class="class-select"
          style="width: 90px;"
          @change="getDetail(dataForm.dateType)"
        >
          <a-select-option v-for="item in classList" :key="item.id" :value="item.id">
            {{ item.className }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col v-for="item in dataTypeList" :key="item.id" class="date-box">
        <a-card
          class="card-shadow"
          style="width:80px;border-radius: 5px;"
          :bodyStyle="{
            padding: '5px 15px',
            background: dataForm.dateType == item.id ? '#13C2C2' : '',
            color: dataForm.dateType == item.id ? '#fff' : '',
            borderRadius: '5px',
            borderColor: dataForm.dateType == item.id ? '#13C2C2' : ''
          }"
          @click="getDetail(item.id)"
        >
          {{ item.dateName }}
        </a-card>
      </a-col>
      <a-col>
        <a-select
          default-value="历史学期"
          v-model="dataForm.semesterHistoryId"
          class="class-select"
          style="width: 190px;"
          @change="getDetail('historySem')"
        >
          <a-select-option value="历史学期">
            历史学期
          </a-select-option>
          <a-select-option v-for="item in SemesterList" :key="item.id" :value="item.id">
            {{ item.semesterName }}
          </a-select-option>
        </a-select>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import { skClassList, querySkSemester } from '@/api/management.js'
export default {
  name: 'skTableHeader',
  data() {
    return {
      dataForm: {
        dateType: 'sem',
        classId: '',
        semesterId: '',
        semesterHistoryId: '历史学期',
      },
      defaultSemesterId: '',
      dataTypeList: [
        // { dateName: '本周', id: 'week' },
        // { dateName: '本月', id: 'month' },
        { dateName: '本学期', id: 'sem' }
      ],
      classList: [],    //班级列表
      SemesterList:[],   //学期列表
    }
  },
  props:["dateType","classId","semesterId"],
  components: {},
  filters: {},
  
  computed: {},
  
  created() {
    this.dataForm.dateType = 'sem';
    this.dataForm.classId = this.classId;
    this.dataForm.semesterId = this.semesterId;
    this.getClassList();
    this.getSkSemester();
  },
  
  activated() {
  },

  mounted() {
  },

  methods: {
    // 班级列表
    getClassList() {
      skClassList()
        .then(res => {
          if (res.success) {
            this.classList = res.result
            this.classList.unshift({ className: '全园', id: '' })
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch(error => {
          console.error(error)
        })
    },
    // 学期列表
    getSkSemester() {
      querySkSemester()
        .then(res => {
          if (res.success) {
            this.SemesterList = res.result.records
            this.getDefultSemesterId();
            this.getDetail(this.dataForm.dateType);
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch(error => {
          console.error(error)
        })
    },
    getDetail(dateType){
      console.log('dateType', dateType)
      if (dateType != "历史学期") {
        if (dateType == "sem") {
          console.log('dateType', dateType)
          this.dataForm.semesterId = this.defaultSemesterId;
          this.dataForm.semesterHistoryId = "历史学期"
          this.dataForm.semester = this.SemesterList.find(item => item.id == this.dataForm.semesterId);
        }else{
          this.dataForm.semesterId = null
        }
        if (dateType == "historySem") {
          if(this.defaultSemesterId == this.dataForm.semesterHistoryId){
            this.dataForm.semesterId = this.defaultSemesterId;
            this.dataForm.dateType = "sem";
            this.dataForm.semester = this.SemesterList.find(item => item.id == this.dataForm.semesterId);
          }else {
            this.dataForm.semesterId = null
            this.dataForm.dateType = "historySem";
            this.dataForm.semester = this.SemesterList.find(item => item.id == this.dataForm.semesterHistoryId);
          }
        }else{
          this.dataForm.dateType = dateType;
          this.dataForm.semesterHistoryId = "历史学期"
        }
        this.$emit("dataFrom",this.dataForm)
      }
    },
    // 获取默认学期id
    getDefultSemesterId(){
      let day = Date.parse(this.$skCommon.getDate(0));
      let Semester = this.SemesterList.filter(item=>{
        let time1 = Date.parse(item.startDate);
        let time2 = Date.parse(item.endDate);
        if (day > time1 && day < time2) {
          return item.id;
        }
      })
      this.defaultSemesterId = Semester[0].id
    },
	  // 获取班级列表
    classListData() {
      return this.classList.filter(item => {
        return item.id != ''
      })
    },
    getSemesterDateSE(semesterId) {
      return this.SemesterList.find(item => item.id == semesterId);
    }
  }
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
.date-box {
  text-align: center;
  cursor: pointer;
}
</style>
